<template>
  <div>
    <div class="outDiv">
      <div class="header">
        <div class="header_back" @click="backToPrev">
          <img class="imgIcon" src="~/static/iconsvgs/top_icon_back.png" alt />
          <span class="back">返回</span>
        </div>
        <h2>选科选课</h2>
        <div class="header_back"></div>
      </div>
      <!-- <div v-if="false" class="default-page">
          <img class="treeImg" src="~@/static/images/tree.png" alt="">
          <span>该服务将于 10 月份正式服务尽情期待哟~</span>
      </div>-->
      <scroller style="top: 0.88rem;" v-if="true">
        <div>
          <div class="mainssOut">
            <!-- <h5>为了更好的服务，需要您了解选课或选科内容</h5>
            <div class="bar bar-first flex-h">
                <span><i>专业与科目对应关系</i><img src="~@/static/images/icon_arrows_right.png" alt="" /></span>
            </div>
             <div class="bar bar-second flex-h">
               <span><i>高校招生限科要求</i><img src="~@/static/images/icon_arrows_right.png" alt="" /></span>
            </div>-->
            <div class="mainImage">
              <img src="~@/static/images/chooseCourseIndex.png" alt />
            </div>
            <div class="choType">
              <div class="typeItem"><img src="~@/static/images/choIndexType_1.png" alt=""></div>
              <div class="typeItem"><img src="~@/static/images/choIndexType_2.png" alt=""></div>
            </div>
            <!-- <div class="bar-btn">
              <sumbitBtn message="下一步" @btnClick="goes"></sumbitBtn>
            </div> -->
            

            <!-- <div class="titleImage">
              <span>选科选课</span>
            </div>
            <div class="introduce">
              <p>新高考背景下，每个学生将面临一次选科选课的决策，高中时期的选科选课也将直接决定以后的专业和职业方向。为了选择符合自己的科目组合，重点考虑三个方面：专业方向、优势学科和高校限科要求。</p>
              <p>本系统融合生涯规划系统帮助同学选择适合自己的专业、优势学科自评分析确定自己的科目强弱、内置高校的限科要求智能筛选科目，为同学们选科选课及学校走班教学提供重要的参考依据。</p>
            </div>
            <div class="mainStep">
              <p class="stepTitle">本流程主要分为以下三步：</p>
              <div class="stepBoxWrap flex-h">
                <div class="di1">
                  <img class="img1" src="~/static/images/icon_01.png" alt />
                  <b class="bb1">添加和提交</b>
                  <b>意向专业类</b>
                </div>
                <div class="di2 flex1">
                  <span class="sp1">
                    <img
                      class="spp1 imgIcon"
                      src="~/static/images/select courses_pic_arrow.png"
                      alt
                    />
                    <img class="spp imgIcon" src="~/static/images/icon_02.png" alt />
                    <img
                      class="spp1 imgIcon"
                      src="~/static/images/select courses_pic_arrow.png"
                      alt
                    />
                  </span>
                  <b class="bb1">提交优势科目</b>
                  <b>强弱排序</b>
                </div>
                <div class="di1">
                  <img class="img1" src="~/static/images/icon_03.png" alt />
                  <b class="bb1">查看最佳</b>
                  <b>选课结果</b>
                </div>
              </div>
            </div>

            <div class="btn">
              <button class="quickStart" @click="goes">立即开始</button>
              <button class="watchRecord" @click="commonJs.gopush('planRecord')">查看最佳选课方案记录</button>
            </div>-->
          </div>
          <div style="width: 100%; height: 3rem"></div>
        </div>
      </scroller>
      <div class="btn">
        <sumbitBtn message="立即开始" @btnClick="goes"></sumbitBtn>
        <button class="watchRecord" @click="commonJs.gopush('planRecord')">查看最佳选课方式</button>
      </div>
    </div>
    <LoginVerification
      :isShowModal="isShowModal"
      v-on:fromChildloginVerification="loginVers"
      headTitle="选科选课服务"
    ></LoginVerification>
    <BuyVip :xBuy='showBuyVipModle' serverName="选课选课功能" @handleCloseBuyDialog="showBuyVipModle=false"></BuyVip>
  </div>
</template>

<script>
import ls from "store2"; 
import { getUsage, getAdvantageUsage } from "~/api/selectCourse";
import { getTeacherUserInfoById, getUserInfoById, getMyVip, identityLogin } from "~/api/identity";
import LoginVerification from "~/components/LoginVerification";
import { backAppOrWx } from "~/common/common";
import sumbitBtn from "./components/sumbitBtn";
import BuyVip from "~/components/BuyVip";
export default {
  data() {
    return {
      loginer: false,
      isShowModal: false,
      showBuyVipModle:false
    };
  },
  components: {
    LoginVerification,
    sumbitBtn,
    BuyVip
  },
  created() {
    this.commonJs.accectAppParame();
  },
  mounted: function() {
    if (!ls.get("tokens")) this.isShowModal = true;
    this.showuserAreas()
  },
  methods: {
    loginVers(data) {
      identityLogin(data)
        .then(res => {
          if (res.code === "0") {
            let usersData = res.data;
            ls.set("yxkData", usersData);
            ls.set("userType", usersData.userType);
            ls.set("tokens", usersData.accessToken);
            this.isShowModal = false;
            this.$vux.toast.text("服务授权成功");
            this.showuserAreas();
          } else {
            this.$vux.toast.text(res.message);
          }
        })
        .catch(error => {
          this.$vux.toast.text(error);
        });
    },
    showuserAreas() {
      if(!ls.get("tokens") || ls.get("userArea")){ return false}
      console.log(22222);
        getUserInfoById({ uid: ls.get("yxkData").userVoId })
          .then(res => {
            let areas = res.data.area;
            let areaArr = areas.split(",");
            let userArea = areaArr[0];
            ls.set("userArea", userArea);
            this.$vux.loading.hide();
          })
          .catch(error => { 
          });
    },

    goes() {
      this.$vux.loading.show()
      getMyVip(ls.get('userType')).then(res=>{
        let isVip = res.data.isVIP;
        if(isVip){
          this.commonJs.gopush("addIntention");
        }else{
          this.showBuyVipModle = true
        }
        this.$vux.loading.hide()
      }).catch(err=>{
        this.$vux.toast.text(err)
        this.$vux.loading.hide()
      })     
    },

    backToPrev() {
      backAppOrWx();
    }
  }
};
</script>

<style lang="less" scoped>
.default-page {
  img {
    display: block;
    width: 6rem;
    height: 5.2rem;
    margin: 1rem auto;
  }
  span {
    display: block;
    height: auto;
    width: 4rem;
    font-size: 0.3rem;
    color: gray;
    margin: 0 auto;
    text-align: center;
  }
}
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: relative;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header_back {
      width: 2rem;
      height: 0.8rem;
      line-height: 0.8rem;
      padding: 0.2rem 0.3rem;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
  
      .imgIcon {
        width: 0.4rem;
        height: 0.4rem;
      }
  
      .back {
        display: inline-block;
        margin-left: 0.1rem;
        font-weight: bold;
        color: #222;
      }
    }
    h2 {
      display: block;
      font-size: 0.4rem;
      font-family: "Source Han Sans CN";
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      line-height: 0.4rem;
    }
  }

  .mainssOut {
    padding: 0 0.1rem;
    overflow: hidden;
    
    h5 {
      font-size: 0.24rem;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      color: rgba(156, 156, 156, 1);
      display: block;
      text-align: center;
    }
    .mainImage {
      margin: 0 0.3rem 0.2rem;
      height: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .choType {
      margin: 0 0.3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .typeItem {
        width: 100%;
        height: auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .typeItem:last-child {
        margin-left: 0.3rem;
      }
    }

    .bar-btn {
      width: 2.8rem;
      height: auto;
      margin: 0.2rem auto 0;
    }

    .titleImage {
      width: 100%;
      height: 2.6rem;
      background: url("~/static/images/select_courses_pic_banner.png") no-repeat;
      background-size: 100% 100%;
      border-radius: 0.2rem;
      overflow: hidden;
      span {
        display: block;
        margin-top: 0.88rem;
        margin-left: 0.92rem;
        font-size: 0.44rem;
        color: #fff;
        letter-spacing: 0.05rem;
      }
    }

    .introduce {
      color: #666;
      font-weight: 500;
      padding: 0 0.5rem;

      p {
        margin-bottom: 0.3rem;
        letter-spacing: 0.02rem;
        font-size: 0.26rem;
        line-height: 0.39rem;
      }
    }

    .mainStep {
      padding: 0 0.5rem;
      margin-bottom: 0.8rem;
      color: #222;
      font-size: 0.26rem;
      font-weight: bold;

      .stepTitle {
        margin-bottom: 0.3rem;
        font-size: 0.26rem;
        font-family: Helvetica;
        color: rgba(34, 34, 34, 1);
      }

      .stepBoxWrap {
        .di1 {
          .img1 {
            display: block;
            width: 0.96rem;
            height: 0.96rem;
            margin: 0 auto;
          }

          b {
            text-align: center;
            display: block;
            font-size: 0.26rem;
            font-family: Helvetica;
            color: rgba(34, 34, 34, 1);

            display: block;
          }
        }

        .di2 {
          height: auto;

          .sp1 {
            height: 0.96rem;
            display: block;
            overflow: hidden;
            text-align: center;

            .spp {
              width: 0.96rem;
              height: 0.96rem;
            }

            .spp1 {
              height: 0.12rem;
              width: auto;
              margin-bottom: 0.42rem;
            }
          }

          b {
            text-align: center;
            font-size: 0.26rem;
            font-family: Helvetica;
            color: rgba(34, 34, 34, 1);

            display: block;
          }
        }

        .bb1 {
          margin-top: 0.44rem;
        }
      }

      .stepDescribe {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          text-align: center;
          font-weight: bold;
        }
      }
    }

  }
  .btn {
    width: 100%;
    height: 1.6rem;
    line-height: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 1px 0.33rem 0 rgba(13,29,55,0.08);
    button {
      width: 3rem;
      height: 0.88rem;
      border-radius: 0.44rem;
      border: none;
      outline: none;
    }
    .watchRecord {
      background: transparent;
      border: 0.02rem solid #eee;
      color: rgba(153, 153, 153, 1);
      font-size: 0.3rem;
      font-weight: bold;
      width: 100%;
      margin-left: 0.3rem;
    }
  }
}
</style>
